{% extends 'base.html' %}

{% block title %}
    hello world
{% endblock %}

{% block style %}
    <script src="/static/js/jquery-1.11.0.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vue-resource.js"></script>
{% endblock %}

{% block content %}
        <ul class="breadnav clearfix">
			<li class="bnav-item"><a href="index.html">首页</a></li>
			<li class="bnav-item">&lt;</li>
			<li class="bnav-item"><a href="meishi.html">美食系列</a></li>
			<li class="bnav-item">&lt;</li>
			<li class="bnav-item"><a href="javascript:;">全部菜品</a></li>
		</ul>
		<div class="clearfix table-wrap" id="tab-span">
			<span class="table-item table-active">全部菜品</span>
			<span class="table-item">经典牛排</span>
			<span class="table-item">意面/烩饭</span>
			<span class="table-item">风味披萨</span>
			<span class="table-item">甜品小食</span>
			<span class="table-item">酒水饮料</span>
			<span class="table-item">其他</span>
			<div class="search clearfix">
				<input class="inp-txt" type="text" name="address" value="输入关键字"
				onfocus="if(this.value=='输入关键字'){this.value=''};this.style.color='black';"
				onblur="if(this.value==''||this.value=='输入关键字'){this.value='输入关键字';this.style.color='gray';}" />
				<input class="inp-btn" type="button" name="" id="" value="搜索" />
			</div>
		</div>
        {% verbatim myblock %}
		<div id="table-div">
			<div class="table-pic table-show clearfix">
				<a v-for="food in food_list" href="meishi-con.html" class="ms-wrap">
					<span class="ms-pic">
						<img src="/static/img/ms-pic1.jpg" alt="" />
					</span>
					<h2 class="ms-tit">{{ food.name }}</h2>
					<p class="ms-txt">{{ food.price }}</p>
				</a>
			</div>
			<ul class="ms-paging clearfix">
				<li><a href="javascript:;" class="pag-item">&lt;</a></li>
				<li><a href="javascript:;" class="pag-item pag-active">1</a></li>
				<li><a href="javascript:;" class="pag-item">2</a></li>
				<li><a href="javascript:;" class="pag-item">3</a></li>
				<li><a href="javascript:;" class="pag-item">4</a></li>
				<li><a href="javascript:;" class="pag-item">&gt;</a></li>
			</ul>
		</div>
        {% endverbatim myblock %}
{% endblock %}

{% block script %}
    <script>
        Vue.use(VueResource);
        var vue = new Vue(
            {
                el:'#table-div',
                data:{
                    message:'hello world',
                    food_list:[]
                },
                created:function(){
                    this.$http.get('/API/Food/').then(
                      function (data) {
                          this.food_list = data['data'];
                      },//success

                      function (error) {
                          console.log(error)
                      } //error

                    ); //vue 封装过的ajax
                },//初始化执行
                methods:{
                    do_something:function () {
                        alert('哈哈哈哈')
                    }
                }
            }
        )
    </script>
{% endblock %}